<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<title>SlickGrid example 3a: Advanced Editing</title>
		<link rel="stylesheet" href="/Scripts/andrewchilds-SlickGrid-a5a6977/slick.grid.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="/Scripts/andrewchilds-SlickGrid-a5a6977/css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
		<link rel="stylesheet" href="/Scripts/andrewchilds-SlickGrid-a5a6977/examples/examples.css" type="text/css" media="screen" charset="utf-8" />
		<style>
		.cell-title {
			font-weight: bold;
		}
	</style>
	</head>
	<body>


		<div style="width:600px;float:left;">
			<div id="myGrid" style="width:100%;height:500px;"></div>
		</div>

		<div class="options-panel" style="width:320px;margin-left:650px;">
            <h2>Demonstrates:</h2>
            <ul>
                <li>compound cell editors driving multiple fields from one cell</li>
                <li>providing validation from the editor</li>
                <li>hooking into validation events</li>
            </ul>
		</div>

		<script language="JavaScript" src="/Scripts/andrewchilds-SlickGrid-a5a6977/lib/firebugx.js"></script>

		<script language="JavaScript" src="/Scripts/andrewchilds-SlickGrid-a5a6977/lib/jquery-1.4.3.min.js"></script>
		<script language="JavaScript" src="/Scripts/andrewchilds-SlickGrid-a5a6977/lib/jquery-ui-1.8.5.custom.min.js"></script>
		<script language="JavaScript" src="/Scripts/andrewchilds-SlickGrid-a5a6977/lib/jquery.event.drag-2.0.min.js"></script>

		<script language="JavaScript" src="/Scripts/andrewchilds-SlickGrid-a5a6977/slick.editors.js"></script>
		<script language="JavaScript" src="/Scripts/andrewchilds-SlickGrid-a5a6977/slick.grid.js"></script>


        <script src="@Url.Content("~/Scripts/jQuery/jquery-1.4.4.min.js")" type="text/javascript"></script>

<script src="/Scripts/Ienablemuch.Scripts/Ienablemuch.JqueryAjaxComboBox/js/jquery.ajaxcombobox-google-minified.js"
    type="text/javascript"></script>
<link href="/Scripts/Ienablemuch.Scripts/Ienablemuch.JqueryAjaxComboBox/css/jquery.ajaxComboBox.css"
    rel="stylesheet" type="text/css" />


<script src="/Scripts/Ienablemuch.Scripts/ParseDynamicContent.js" type="text/javascript"></script>


		<script>
		    var grid;
		    var data = [];

		    var columns = [
			{ id: "title", name: "Title", field: "title", width: 120, cssClass: "cell-title", editor: TextCellEditor },
            { id: "range", name: "Range", width: 150, formatter: NumericRangeFormatter, editor: NumericRangeEditor }
		];

		    var options = {
		        editable: true,
		        enableAddRow: false,
		        enableCellNavigation: true,
		        asyncEditorLoading: false
		    };

		    function NumericRangeFormatter(row, cell, value, columnDef, dataContext) {
		        // return dataContext.from + " - " + dataContext.to;
		        return dataContext.theValue ;
		    }

		    function NumericRangeEditor(args) {
		        var $theValue;
		        var scope = this;

		        this.init = function () {
		            $theValue = $('<span class="ac_area" id="XYZ" style="width: 150px;"></span>')
                            .appendTo(args.container)
                            .bind("keydown", scope.handleKeyDown);

		            var n = $('#XYZ').ajaxComboBox('/Category/Lookup', {
		                'lang': 'en',
		                'select_only': true,
		                'mini': true,
		                'init_src': '/Category/Caption',
		                'init_val': ['']
                        , other_attr: { 'data-val-required': 'The CategoryId field is required.', 'data-val-number': 'The field CategoryId must be a number.', 'data-val': 'true', 'for-grid': 'true' }
                        , "sub_info": true, "on_selected": "thisIsOk();"
		            });


		            $theValue.ajc().box.focusInput();

		            scope.focus();
		        };

		        this.handleKeyDown = function (e) {
		            if (e.keyCode == $.ui.keyCode.LEFT || e.keyCode == $.ui.keyCode.RIGHT || e.keyCode == $.ui.keyCode.TAB) {
		                e.stopImmediatePropagation();
		            }
		        };

		        this.destroy = function () {
		            $(args.container).empty();
		        };

		        this.focus = function () {
		            $theValue.focus();
		        };

		        this.serializeValue = function () {
		            // alert("hey " + $theValue.val());
		            // alert($('input[name=XYZ]').val());
		            return { theValue: $theValue.ajc().box.hidden.val() };
		        };

		        this.applyValue = function (item, state) {
		            item.theValue = state.theValue;		            
		        };

		        this.loadValue = function (item) {
		            $theValue.val(item.theValue);		            
		        };

		        this.isValueChanged = function () {
		            return args.item.theValue != $theValue.ajc().box.hidden.val();
		            return true;
		        };

		        this.validate = function () {
		            /*if (isNaN(parseInt($theValue.val(), 10)) )
		                return { valid: false, msg: "Please type in valid numbers." };*/

		            /*if (parseInt($theValue.val(), 10) > parseInt($to.val(), 10))
		                return { valid: false, msg: "'from' cannot be greater than 'to'" };*/

		            return { valid: true, msg: null };
		        };

		        this.init();
		    }



		    $(function () {
		        for (var i = 0; i < 500; i++) {
		            var d = (data[i] = {});

		            d["title"] = "Task " + i;
		            d["theValue"] = Math.round(Math.random() * 100);		            
		        }

		        grid = new Slick.Grid($("#myGrid"), data, columns, options);

		        grid.onValidationError = function (currentCellNode, validationResults, currentRow, currentCell, column) {
		            alert(validationResults.msg);
		        }
		    })

		</script>

        <h2>Options:</h2>
            <button onclick="grid.setOptions({autoEdit:true})">Auto-edit ON</button> 
            &nbsp;
            <button onclick="grid.setOptions({autoEdit:false})">Auto-edit OFF</button>

	</body>
</html>
